<template>
  <div>
    <Echart
      :options="options"
      id="leftbotton2chart"
      height="3rem"
      width="6.166667rem"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'
export default {
  data () {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    },
  },
  watch: {
    cdata: {
      handler (newData) {
        this.options = {
        color: ['#3398DB'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '6%',
            bottom: '3%',
            containLabel: true,
        },
    
        xAxis: [
            {
                name:'时间',
                nameTextStyle: {
                  padding: [18, 0, 0, -17]
                  },
                type: 'category',
                data: newData.xData,
                axisTick: {
                    alignWithLabel: true
                },
                axisLine: {
                   show: true,
                   lineStyle: {
                     color: '#fff'
                    },
                    symbol: ['none', 'arrow'],
                    symbolSize: [6, 6]
                },
                axisLabel: {
                   show: true,
                   interval:0,
                   rotate:"45",
                   textStyle: {
                      color: '#c3dbff',  //更改坐标轴文字颜色
                      fontSize : 10      //更改坐标轴文字大小
                }
         },
            }
        ],
        yAxis: [
            {
                name:'产量',
                type: 'value',
                axisLine: {
                 show: true,
                 lineStyle: {
                   color: '#fff'
                  },
                },
                axisLabel: {
                 textStyle: {
                   fontSize: 10
                  }
                },
                splitLine:{
                  show:false     //去掉网格线
                }
            }
        ],
        series: [
            {
                name: '直接访问',
                type: 'line',
                smooth:true,
                label: {
                   show: true,
                   color:'#fff',
                   position: [2,-11], 
                   formatter: function(arg){
                      return arg.value
                  }
                },
                data: newData.yData
               }
             ]
        };
      },
      immediate: true,
      deep: true
    }
  }
};
</script>